<template>
  <div class="friend">
    <van-nav-bar :fixed="true" title="添加联系人" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="content" :style="{minHeight:(fullHeight-46) +'px' }">
      <van-search
        v-model="searchKey"
        shape="round"
        show-action
        background="#4fc08d"
        placeholder="请输入对方账号"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>

      <van-empty image="search" :description="description" v-if="empty" />

      <div class="user-list" v-if="userList.length > 0">
        <van-row v-for="(user,index) in userList" :key="index">
          <van-col span="5" class="user-item-box">
            <div class="user-item-img">
              <van-image width="40px" height="40px" fit="fill" radius="5" :src="user.userImg" />
            </div>
          </van-col>
          <van-col span="14" class="user-item-box">
            <div class="user-item-text">{{user.userName}}</div>
          </van-col>
          <van-col span="5" class="user-item-box">
            <div class="user-item-btn">
              <van-button
                @click="addFriend(user)"
                size="small"
                :plain="user.isFriend"
                :disabled="user.isFriend"
                color="linear-gradient(to right, #4bb0ff, #6149f6)"
              >{{user.isFriend ? '已添加' : '添加好友'}}</van-button>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Friend",
  data() {
    return {
      searchKey: "",
      fullWidth: document.documentElement.clientWidth,
      fullHeight: document.documentElement.clientHeight,
      description: "",
      userList: "",
      empty: true
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/contact");
    },
    onSearch() {
      if (this.searchKey.length > 0) {
        const toast = this.$toast.loading({
          duration: 0,
          message: "搜索中...",
          forbidClick: true
        });
        this.axios
          .get(this.server.BaseUrl + "/users", {
            params: {
              userId: this.user.userId,
              searchKey: this.searchKey
            }
          })
          .then(res => {
            toast.clear();
            if (res.data.status) {
              let userList = res.data.data;
              if (userList.length == 0) {
                this.description = "未找到用户 " + this.searchKey;
                this.empty = true;
              } else {
                this.empty = false;
                this.userList = userList;
              }
            } else {
              this.$toast(res.data.message);
            }
          })
          .catch(err => {
            toast.clear();
            this.$toast("网络异常");
            this.empty = true;
            console.log(err);
          });
      } else {
        this.$toast("请先输入搜索内容");
      }
    },
    /**
     * 动态获取浏览器宽高
     */
    handleResize() {
      this.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = document.documentElement.clientHeight;
    },
    //添加好友
    addFriend(user) {
      if (user.userId == this.user.userId) {
        this.$toast("不能添加自己为好友!");
        return;
      }
      const toast = this.$toast.loading({
        duration: 0,
        message: "处理中...",
        forbidClick: true
      });
      this.axios
        .post(this.server.BaseUrl + "/addFriend", {
          userId: this.user.userId,
          friendId: user.userId,
          userName: user.userName
        })
        .then(res => {
          toast.clear();
          if (res.data.status) {
            this.$toast(res.data.data);
            this.userList.forEach(item => {
              if (item.userId == user.userId) {
                item.isFriend = true;
              }
            });
          } else {
            this.$toast(res.data.message);
          }
        })
        .catch(err => {
          toast.clear();
          this.$toast("网络异常");
          this.empty = true;
          console.log(err);
        });
    }
  },
  computed: {
    ...mapState(["user"])
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy: function() {
    window.removeEventListener("resize", this.handleResize);
  }
};
</script>

<style lang="scss" scoped>
.friend {
  width: 100%;
  background-color: #f8f8f9;

  .van-nav-bar {
    background-color: #f8f8f9;
  }

  .content {
    margin-top: 46px;

    .user-list {
      padding-top: 10px;
      padding-bottom: 10px;

      .van-row {
        background-color: white;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .van-cell {
        padding-left: 0;
        padding-right: 0;
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .user-item-box {
        .user-item-img {
          width: 40px;
          height: 40px;
          border-radius: 5px;
          margin: auto;
          text-align: center;
        }

        .user-item-text {
          text-align: left;
          color: black;
          line-height: 40px;
          padding-left: 5px;
        }

        .user-item-btn {
          line-height: 40px;
        }
      }
    }
  }
}
</style>